<template>
  <div class="map" ref="chart">

  </div>
</template>
<script lang='ts'>
import { reactive, ref, onMounted,onBeforeMount, getCurrentInstance } from 'vue'
import { useStore } from 'vuex'
import * as echarts from 'echarts';
import { EChartOption, EChartsResponsiveOption } from "echarts"
import chinaMap from "@/assets/map/json/china.json"
import {elmessage,data} from "@/hook/hook"
import {getUserAddress} from "@/api/adminApi"
export default {
  name: 'ChinaMap',
  setup() {
    const store = useStore()
    // @ts-ignore
    const { proxy } = getCurrentInstance() // 1.获取proxy实例
    
    const chart = ref()
    
    
    // 从后台获取数据
    const getDatas=()=>{
      getUserAddress(data()).then((res:any)=>{
        // // console.log(res);
        // store.state.adminState.userAddressDatas=(res.data["datas"])
        // console.log(store.state.adminState.userAddressDatas);
        dataSet(res.data["datas"])
        
      })
    }
    const dataSet=(data:any)=>{
      store.state.adminState.userAddressDatas=data
    }
    const dataGet=()=>{
      return store.state.adminState.userAddressDatas
    }
    // 画图
    const init=() =>{
      var myChart = echarts.init(chart.value) //这里是为了获得容器所在位置   
      echarts.registerMap("china", chinaMap) //注册地图

      // 指定地图配置项和数据
      var option = {
        title: {
          text: "使用本系统的人员分布图",
          subtext: '注：暂统计求职者',
          textStyle:{
            fontSize: 22
          }
        },

        series: [
          {
            type: "map",
            map: "china",
            label: { //文字显示
              show: false, //是否显示标签
              fontSize: 12,
              color: "#fff",
            },
            itemStyle: { //图形样式
              areaColor: "#219edb",
              borderColor: "#f7f7f7",
              borderWidth: 1
            },
            emphasis: {//鼠标移入高亮
              label: { //文字显示
                show: true, //是否显示标签
                fontSize: 10,
                color: "#333",
              },
              itemStyle: {
                areaColor: "#ee6666",
                borderColor: "#ccc",

              },
            },
            data: dataGet()
          }
        ],
        visualMap: {

          min: 0,
          max: 20,
          text: ['High', 'Low'],
          realtime: false,
          calculable: true,
          inRange: {
            color: ['lightskyblue', 'yellow', 'orangered']
          }
        },
      }

      myChart.setOption(option as EChartOption | EChartsResponsiveOption)
      

    }
    
    onMounted(async()=>{
      await getDatas()
      setTimeout(() => {
        init()
      }, 500);
      
    })
    onBeforeMount( async() => {
      
      // console.log(store.state.adminState.userAddressDatas);
      
      
      // console.log(chinaMap);

    })

    return {

      chart,
    }
  }
}
</script>
<style scoped>
.map {
  display: flex;
    width: 600px;
    height: 500px;
}
</style>